<template>
    <view :style="{ '--color': color }">
        <view class="bgwhite padding30-40 m-bot20" v-if="pageData.store_id && !pageData.shops">
            <view class="d-flex j-sb a-center">
                <view class="d-flex">
                    <image :src="$imgUrls(pageData.shop_logo)" mode="aspectFit" class="logo"></image>
                    <view class="p-left30 d-flex f-column j-sb">
                        <view class="color_22 size28 bold">{{ pageData.shopName }}</view>
                        <view class="color_77 size22 bold400">
                            在售商品
                            <text class="color_22 bold m-left4 m-right4">{{ pageData.shopGoodsCount }}</text>
                            件
                        </view>
                    </view>
                </view>
                <view class="d-flex a-center" @click="toStore(pageData.store_id)" v-if="scan == 0">
                    <text class="color_22 h6 bold500 m-right10">进入店铺</text>
                    <text class="iconfont icon-xiangyouxiayiye color_22 h6"></text>
                </view>
            </view>
        </view>

        <block v-if="pageData.shops && showType == 1">
            <view class="List" v-if="storeItem">
                <view class="logoBox flexac m-right20" v-if="storeItem.logo">
                    <image :src="$imgUrls(storeItem.logo)" mode="aspectFill" class="logo"></image>
                </view>
                <view class="flex-1 d-flex f-column">
                    <view class="row j-sb">
                        <view class="d-flex a-center">
                            <view class="d-flex f-column">
                                <text class="size26 black bold">{{ storeItem.name }}</text>
                                <view class="d-flex a-center m-top10">
                                    <text class="h6 color_99 m-right14" v-if="storeItem.goods_num > 0">在售{{ storeItem.goods_num }}件</text>
                                    <text class="h6 color_99" v-if="storeItem.distance">距离{{ $pop.formatDistance(storeItem.distance) }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="d-flex f-column" v-if="edit_store == 1">
                            <view class="d-flex a-center color_33 h6">
                                <text class="m-right10" @click.stop="toStore(storeItem.shop_id)">进入店铺</text>
                                <text class="iconfont icon-xiangyouxiayiye color_22 h6"></text>
                            </view>
                            <view class="switchBtn m-top10" @click.stop="selectStore">切换门店</view>
                        </view>
                    </view>
                    <text class="h6 color_99 ellipsis m-top8">{{ storeItem.address }}</text>
                </view>
            </view>
        </block>

        <block v-if="pageData.shops && showType == 2">
            <view class="newList" v-if="storeItem" @click="toStore(storeItem.shop_id)">
                <view class="logoBoxs flexac m-right20" v-if="storeItem.logo">
                    <image :src="$imgUrls(storeItem.logo)" mode="aspectFill" class="logos"></image>
                </view>
                <view class="d-flex a-center">
                    <view class="Direct" v-if="storeItem.main_store == 1">直营门店</view>
                    <text class="black size40 bold storeName ellipsis">{{ storeItem.name }}</text>
                </view>

                <view class="row a-center m-top10">
                    <view class="d-flex a-center color bold m-right20" v-if="storeItem.score && storeItem.score > 0">
                        <text class="size32">{{ storeItem.score }}</text>
                        <text class="h6">分</text>
                    </view>
                    <text class="h6 m-right20 color_66" v-if="storeItem.sales_num">月销量{{ storeItem.sales_num }}</text>
                    <text class="h6 m-right20 color_66" v-if="storeItem.favorable > 0">好评{{ storeItem.favorable }}%</text>
                    <text class="h6 color_66" v-if="storeItem.distance">距离{{ $pop.formatDistance(storeItem.distance) }}</text>
                </view>
                <view class="row a-center">
                    <view class="flex-1 d-flex a-center p-right14 color_66">
                        <text class="iconfont icon-B size38 m-right10"></text>
                        <text class="size26 flex-1 ellipsis">{{ storeItem.address }}</text>
                    </view>
                    <view class="d-flex a-center switchContact">
                        <view class="iconfont icon-dianhua size36 padding10-26" @click.stop="$common.Tel(storeItem.phone)"></view>
                        <view class="switchBtn" @click.stop="selectStore">切换门店</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        name: 'Store',
        props: ['pageData', 'scan', 'shop_id', 'showType', 'edit_store'],
        data() {
            return {
                show: false,
                entrepotShopId: null
            };
        },

        methods: {
            toStore(store_id) {
                this.toUrl(`/pages/store/storeIndex?shop_id=${store_id}`);
            },
            toggleStore(shop_id) {
                this.show = false;
                this.setShopId(shop_id);
            },
            selectStore() {
                let ids = [];
                this.pageData.shops.forEach((item) => {
                    ids.push(item.shop_id);
                });
                this.toUrl(`/otherPage/custom/selectStore?shopsid=${ids.join()}`);
            }
        },
        computed: {
            ...mapState(['color']),
            currentShop_id() {
                return this.shop_id || (this.pageData && this.pageData.shops.length > 0 ? this.pageData.shops[0].shop_id : null);
            },
            storeItem() {
                if (!this.pageData || !this.currentShop_id || !this.pageData.shops) return null;
                const result = this.pageData.shops.find((n) => n.shop_id == this.currentShop_id);
                if (result) {
                    this.$emit('storeItem', result);
                }

                return result;
            }
        },
        watch: {
            currentShop_id: {
                deep: true,
                immediate: true,
                handler(newValue) {
                    if (newValue) uni.setStorageSync('shop_id', newValue);
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .List {
        width: 100%;
        background-color: #fff;
        padding: 20rpx 10rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .logoBoxs {
        background-color: #fff;
        border: 1rpx solid #ccc;
        position: absolute;
        right: 0;
        top: -16rpx;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .logoBoxs,
    .logos {
        width: 110rpx;
        height: 110rpx;
    }

    .logoBox,
    .logo {
        width: 80rpx;
        height: 80rpx;
    }

    .logoBoxList,
    .logoList {
        width: 80rpx;
        height: 80rpx;
        border-radius: 10rpx;
    }

    .storePop {
        width: 100%;
        background-color: #fff;
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        border-radius: 10rpx 10rpx 0 0;
    }

    .title {
        font-size: 36rpx;
        color: #000;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20rpx;
    }

    .StoreBox {
        width: 100%;
        padding-top: 20rpx;
        max-height: 800rpx;
        overflow: scroll;
    }

    .StoreList {
        border: 1rpx solid #e6e6e6;
        border-radius: 6rpx;
        width: 100%;
        height: 120rpx;
        background-color: #fff;
        padding: 30rpx 20rpx;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
    }

    .Active {
        border: 1rpx solid var(--color);
    }

    .StoreName {
        max-width: 200rpx;
        font-size: 26rpx;
        color: #000;
        font-weight: bold;
    }

    .newList {
        width: 100%;
        padding: 30rpx 20rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        position: relative;
        border-bottom: 1rpx solid #f8f8f8;
    }

    .storeName {
        width: 560rpx;
    }

    .switchBtn {
        width: 130rpx;
        height: 44rpx;
        background-color: var(--color);
        border-radius: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 24rpx;
    }

    .switchContact {
        position: relative;
    }

    .switchContact::after {
        content: '';
        width: 1px;
        height: 40rpx;
        background-color: #ccc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
    }

    .Direct {
        border: 1rpx solid var(--color);
        color: var(--color);
        padding: 0rpx 6rpx;
        font-size: 20rpx;
        margin-right: 10rpx;
    }
</style>
